<script>
    $("#bodyView").removeClass("background");
    $("#bodyView").removeClass("news_background");
    $("#bodyView").removeClass("achievement_background");
    $("#bodyView").removeClass("edituser_background");
</script>
<!--提示框模板-->
<script type="text/ng-template" id="customTemplate.html">
    <a>
        <img class="img-circle" ng-src="{{match.model.headimage}}" style="width: 20px;height: 20px;">
        <span ng-bind-html="match.label | uibTypeaheadHighlight:query" style="font-size: 15px;"></span>
    </a>
</script>
<!--提示框模板-->
<div id="container"></div>
<nav id="tf-menu" class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button style="background-color: rgba(255,255,255,0.2)" type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"  style="background-color: rgba(0,0,0,1)">Toggle navigation</span>
                <span class="icon-bar" style="background-color: rgba(0,0,0,1)"></span>
                <span class="icon-bar" style="background-color: rgba(0,0,0,1)"></span>
                <span class="icon-bar" style="background-color: rgba(0,0,0,1)"></span>
            </button>
            <a class="navbar-brand" href="javascript:void(0)">
                <img id="logo" alt="Brand" ng-src="img/logo.png">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="javascript:void(0)" class="NavButton" ng-click="goAddNews()" ng-if="user.role==3">发表新闻 <span
                        class="sr-only">(current)</span></a></li>
                <li class="active"><a href="javascript:void(0)" class="NavButton" ng-click="goAddAchievement()" ng-if="user.role==2||user.role==3">发表成果 <span
                        class="sr-only">(current)</span></a></li>
                <li><a href="javascript:void(0)" class="NavButton" ng-click="goManageUsers()" ng-if="user.role==3">用户管理</a></li>
                <li><a href="javascript:void(0)" class="NavButton" ng-click="goEditSelf()" ng-if="user.role!=0">个人中心</a></li>
                <li><a href="javascript:void(0)" class="NavButton" ng-click="goClubMembers()">查看社团成员</a></li>
                <li><a href="javascript:void(0)" class="NavButton" ng-click="logout()">注销</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="jumbotron col-md-12 text-center col-sm-12" id="banner">
            <h1 class="wow bounceInUp">Basketball is a brotherhood.</h1>
            <p>Welcome!</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button" ng-click="goToNewsList()">GET START</a></p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1">
            <div class="input-group" style="width: 100%;">

            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div>
    <div class="row" id="newsList">
        <div class="container mp30">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-success">
                        <div class="panel-heading text-center">
                            <span class="glyphicon glyphicon-list-alt"></span><b id="newsListHead">社团新闻</b>
                            <div class="text-center" style="margin-top: 30px">
                                <input type="text"
                                       class="form-control"
                                       ng-model="keyWords"
                                       typeahead-on-select="onSelect($item, $model, $label, $event)"
                                       placeholder="搜索新闻"
                                       uib-typeahead="new_title as news.news_title for news in allNews | filter:{news_title:$viewValue}"
                                       typeahead-template-url="customTemplate.html"
                                       typeahead-show-hint="true"
                                       typeahead-min-length="0" >
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-12 col-md-8 col-md-offset-2">
                                    <uib-alert  ng-if="allNews.length == 0" type="warning">暂时没有新闻哟~</uib-alert>
                                    <ul class="newsList" style="height: 300px;">
                                        <li class="news-item" ng-if="allNews[0]">
                                            <table cellpadding="4">
                                                <tr>
                                                    <td>
                                                        <img ng-src="{{allNews[0].headimage}}" style="width: 50px;height: 50px;"  class="img-circle" />
                                                    </td>
                                                    <td></td>
                                                    <td style="width:300px;">
                                                        标题:&nbsp;&nbsp;&nbsp;<b>{{allNews[0].news_title}}</b>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td ></td>
                                                    <td style="font-size: 10px;width:300px;">{{allNews[0].nickname}}&nbsp;&nbsp;&nbsp;发表于{{allNews[0].news_publish_time}}</td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="viewMore(allNews[0].news_id)">查看详情</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="editNews(allNews[0].news_id)" ng-if="user.role==3">编辑</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="deleteNews(allNews[0].news_id)" ng-if="user.role==3">删除</a></td>
                                                </tr>
                                            </table>
                                        </li>
                                        <li class="news-item" ng-if="allNews[1]">
                                        <table cellpadding="4">
                                            <tr>
                                                <td>
                                                    <img ng-src="{{allNews[1].headimage}}" style="width: 50px;height: 50px;"  class="img-circle" />
                                                </td>
                                                <td></td>
                                                <td style="width:300px;">
                                                    标题:&nbsp;&nbsp;&nbsp;<b>{{allNews[1].news_title}}</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td ></td>
                                                <td style="font-size: 10px;width:300px;">{{allNews[1].nickname}}&nbsp;&nbsp;&nbsp;发表于{{allNews[1].news_publish_time}}</td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="viewMore(allNews[1].news_id)">查看详情</a></td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="editNews(allNews[1].news_id)" ng-if="user.role==3">编辑</a></td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="deleteNews(allNews[1].news_id)" ng-if="user.role==3">删除</a></td>
                                            </tr>
                                        </table>
                                    </li>
                                        <li class="news-item" ng-if="allNews[2]">
                                        <table cellpadding="4">
                                            <tr>
                                                <td>
                                                    <img ng-src="{{allNews[2].headimage}}" style="width: 50px;height: 50px;"  class="img-circle" />
                                                </td>
                                                <td></td>
                                                <td style="width:300px;">
                                                    标题:&nbsp;&nbsp;&nbsp;<b>{{allNews[2].news_title}}</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td ></td>
                                                <td style="font-size: 10px;width:300px;">{{allNews[2].nickname}}&nbsp;&nbsp;&nbsp;发表于{{allNews[2].news_publish_time}}</td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="viewMore(allNews[2].news_id)">查看详情</a></td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="editNews(allNews[2].news_id)" ng-if="user.role==3">编辑</a></td>
                                                <td class="operationBtn"><a href="javascript:void(0)" ng-click="deleteNews(allNews[2].news_id)" ng-if="user.role==3">删除</a></td>
                                            </tr>
                                        </table>
                                    </li>
                                        <li class="news-item" ng-if="allNews[3]">
                                            <table cellpadding="4">
                                                <tr>
                                                    <td>
                                                        <img ng-src="{{allNews[3].headimage}}" style="width: 50px;height: 50px;"  class="img-circle" />
                                                    </td>
                                                    <td></td>
                                                    <td style="width:300px;">
                                                        标题:&nbsp;&nbsp;&nbsp;<b>{{allNews[3].news_title}}</b>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td ></td>
                                                    <td style="font-size: 10px;width:300px;">{{allNews[3].nickname}}&nbsp;&nbsp;&nbsp;发表于{{allNews[3].news_publish_time}}</td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="viewMore(allNews[3].news_id)">查看详情</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="editNews(allNews[3].news_id)" ng-if="user.role==3">编辑</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="deleteNews(allNews[3].news_id)" ng-if="user.role==3">删除</a></td>
                                                </tr>
                                            </table>
                                        </li>
                                        <li class="news-item" ng-repeat="news in allNews.slice(4)">
                                            <table cellpadding="4">
                                                <tr>
                                                    <td>
                                                        <img ng-src="{{news.headimage}}" style="width: 50px;height: 50px;"  class="img-circle" />
                                                    </td>
                                                    <td></td>
                                                    <td style="width:300px;">
                                                        标题:&nbsp;&nbsp;&nbsp;<b ng-bind="news.news_title"></b>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td ></td>
                                                    <td style="font-size: 10px;width:300px;">{{news.nickname}}&nbsp;&nbsp;&nbsp;发表于{{news.news_publish_time}}</td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="viewMore(news.news_id)">查看详情</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="editNews(news.news_id)" ng-if="user.role==3">编辑</a></td>
                                                    <td class="operationBtn"><a href="javascript:void(0)" ng-click="deleteNews(news.news_id)" ng-if="user.role==3">删除</a></td>
                                                </tr>
                                            </table>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">

                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <span class="label label-default myLabel">成员成果展示</span>
                    <br><br><br>
                </div>
                <div class="row">
                    <uib-alert  ng-if="achievements.length == 0" type="warning">暂时没有成果哟~</uib-alert>
                    <div class="col-sm-6 col-md-3" ng-repeat="achievement in achievements">
                        <div class="thumbnail">
                            <img ng-src="{{achievement.headimage}}" alt="{{achievement.nickname}}" style="width: inherit;" class="img-rounded img-responsive">
                            <div class="caption">
                                <h3>{{achievement.achievement_title}}</h3>
                                <p>作者：&nbsp;&nbsp;&nbsp;{{achievement.nickname}}<br>发表于：{{achievement.achievement_publish_time}}</p>
                                <p>
                                    <a href="javascript:void(0)" ng-class="{'btn':true,'btn-primary':true,'btn-block':user.role!=3}" role="button" ng-click="viewAchievementDetail(achievement.achievement_id)">查看</a>
                                    <a href="javascript:void(0)" class="btn btn-primary" role="button" ng-click="editAchievement(achievement.achievement_id)" ng-if="user.role==3">编辑</a>
                                    <a href="javascript:void(0)" class="btn btn-danger" role="button" ng-click="deleteAchievement(achievement.achievement_id)" ng-if="user.role==3">删除</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <uib-pagination previous-text="上一页" next-text="下一页" first-text="首页" last-text="尾页" ng-change="changePage()" items-per-page="{{itemsPerPage}}" total-items="totalNum" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false"></uib-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer text-center" style="padding-top: 30px;">
    <small>&copy;All right reserved HZNU.TomKK&Candying Contact us 810433626@qq.com</small>
</footer>



<!--初始化WOW-->
<script>
    new WOW().init();
</script>
<!--新闻轮播-->
<script src="lib/newbox/jquery.bootstrap.newsbox.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(function () {
            $(".newsList").bootstrapNews({
                newsPerPage: 10,
                autoplay: true,
                pauseOnHover:true,
                direction: 'up',
                newsTickerInterval: 3000,
                onToDo: function () {
                    //console.log(this);
                }
            });
        });
    })

</script>
<!--初始化canvas-->
<script>

    var camera, scene, renderer;

    var texture_placeholder,
            isUserInteracting = false,
            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 90, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0,
            target = new THREE.Vector3();

    init();
    animate();

    function init() {

        var container, mesh;

        container = document.getElementById('container');

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

        scene = new THREE.Scene();

        texture_placeholder = document.createElement('canvas');
        texture_placeholder.width = 128;
        texture_placeholder.height = 128;

        var context = texture_placeholder.getContext('2d');
        context.fillStyle = 'rgb( 200, 200, 200 )';
        context.fillRect(0, 0, texture_placeholder.width, texture_placeholder.height);

        var materials = [

            loadTexture('lib/canvas/skybox/px.jpg'), // right
            loadTexture('lib/canvas/skybox/nx.jpg'), // left
            loadTexture('lib/canvas/skybox/py.jpg'), // top
            loadTexture('lib/canvas/skybox/ny.jpg'), // bottom
            loadTexture('lib/canvas/skybox/pz.jpg'), // back
            loadTexture('lib/canvas/skybox/nz.jpg')  // front

        ];

        mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300, 7, 7, 7), new THREE.MultiMaterial(materials));
        mesh.scale.x = -1;
        scene.add(mesh);

        renderer = new THREE.CanvasRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        document.getElementById("container").addEventListener('mousedown', onDocumentMouseDown, false);
        document.getElementById("container").addEventListener('mousemove', onDocumentMouseMove, false);
        document.getElementById("container").addEventListener('mouseup', onDocumentMouseUp, false);
//        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

        document.getElementById("container").addEventListener('touchstart', onDocumentTouchStart, false);
        document.getElementById("container").addEventListener('touchmove', onDocumentTouchMove, false);

        //

        window.addEventListener('resize', onWindowResize, true);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function loadTexture(path) {

        var texture = new THREE.Texture(texture_placeholder);
        var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});

        var image = new Image();
        image.onload = function () {

            texture.image = this;
            texture.needsUpdate = true;

        };
        image.src = path;

        return material;

    }

    function onDocumentMouseDown(event) {

        event.preventDefault();

        isUserInteracting = false;

        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

    }

    function onDocumentMouseMove(event) {

        if (isUserInteracting === true) {

            lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

        }

    }

    function onDocumentMouseUp(event) {

        isUserInteracting = false;

    }

    //    function onDocumentMouseWheel( event ) {
    //
    //        camera.fov -= event.wheelDeltaY * 0.05;
    //        camera.updateProjectionMatrix();
    //
    //    }
    //

    function onDocumentTouchStart(event) {

        if (event.touches.length == 1) {

            event.preventDefault();

            onPointerDownPointerX = event.touches[0].pageX;
            onPointerDownPointerY = event.touches[0].pageY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

        }

    }

    function onDocumentTouchMove(event) {

        if (event.touches.length == 1) {

            event.preventDefault();

            lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
            lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

        }

    }

    function animate() {

        requestAnimationFrame(animate);
        update();

    }

    function update() {

        if (isUserInteracting === false) {

            lon += 0.1;

        }

        lat = Math.max(-85, Math.min(85, lat));
        phi = THREE.Math.degToRad(90 - lat);
        theta = THREE.Math.degToRad(lon);

        target.x = 500 * Math.sin(phi) * Math.cos(theta);
        target.y = 500 * Math.cos(phi);
        target.z = 500 * Math.sin(phi) * Math.sin(theta);

        camera.lookAt(target);

        renderer.render(scene, camera);

    }

</script>